import { ButtonHTMLAttributes, FC, ReactNode } from 'react'
import Cless from 'classnames'
import './button.css'

// type(类型别名)
type BtnType = "primary" | "success" | "info" | "default"

// button上所有的属性
type BtnEvent = ButtonHTMLAttributes<HTMLElement>

interface IProps {
    types?: BtnType,
    children?: ReactNode
}

type AllProps = IProps & BtnEvent



const Button: FC<AllProps> = (props: AllProps) => {
    const { types, children, ...arg } = props
    const classNames = Cless("el-button", {
        [`el-button--${types}`]: types
    })
    return <button { ...arg } className = { classNames }>
        { children }
    </button>
}

Button.defaultProps = {
    types: "default",
    children: "默认值"
}

export default Button

// export enum BtnType {
//     Primary = "primary",
//     Success = "success",
//     Info = "info",
//     Default = "default"
// }
